<template>
  <div>
    <h4>温度热容曲线</h4>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import echarts from "echarts"
export default {
  props: ["datas"],
  data() {
    return {
      charts: "",
      opinionData: [
        "305.45",
        "331.85",
        "367.75",
        "399.05",
        "449.65",
        "488.55",
        "541.85",
        "598.55",
        "666.34",
      ],
      data: [
        "1.731",
        "1.799",
        "1.91",
        "2.028",
        "2.22",
        "2.354",
        "2.578",
        "2.872",
        "3.28",
      ],
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main")
    })
    console.log("这是datas", this.datas)
    this.processing()
  },
  methods: {
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["温度/℃"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.data,
        },
        yAxis: {
          type: "value",
        },

        series: [
          {
            name: "温度/℃",
            type: "line",
            stack: "总量",
            data: this.opinionData,
          },
        ],
      })
    },
    // 数据的处理
    processing() {
      const i = this.datas.map(function (item, index) {
        return item[0]
      })
    //   console.log("这是处理后的数据",i);
    this.opinionData = i
    },
  },
}
</script>

<style>
</style>